<template>
  <div>
    <div class="bnt">
      <i class="el-icon-star-off" style="font-size: small; margin-left: -3%; margin-top: 1%" />
      <div style="margin-top: -1%; margin-left: -1%">
        <span
          style="
            margin-left: -10px;
            margin-top: 10px;
            font-weight: bold;
            color: white;
            font-size: larger;
          "
        >
          <el-icon>
            <Star />
          </el-icon>
        </span>
        <span
          style="margin-left: 10px; font-weight: bold; color: white; font-size: larger"
          @click="dialogVisible = true"
        >
          评分
        </span>
      </div>
    </div>
    <div style="width: 100%; height: 50px; background-color: red">
      <i class="el-icon-potato-strips" style="font-size: 25px" />
      <div style="margin-top: 1%">
        <span style="font-weight: bold; color: white; font-size: larger">
          <el-icon>
            <Goods />
          </el-icon>
        </span>
        <span
          style="
            margin-left: 10px;
            margin-top: 2%;
            font-weight: bold;
            color: white;
            font-size: larger;
          "
          @click="buy"
          >特惠购票</span
        >
      </div>
    </div>

    <el-dialog title="我的评分" v-model="dialogVisible" width="50%" :before-close="handleClose">
      <div style="margin-top: -30px">
        <h4>请分享您的观影体验！</h4>
      </div>
      <el-rate v-model="v" :texts="texts" :colors="['#409eff', '#67c23a', '#FF9900']" show-text>
      </el-rate>
      <div style="margin-top: 20px">
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="star">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ref, reactive, onMounted } from 'vue';
import router from '@/router/index';
import emmitter from '@/utils/bus';
const dialogVisible = ref(false);
const sForm = reactive({
  uid: '',
  mid: '',
  star: '',
});
const texts = ref(['差劲', '不满', '一般', '满意', '惊喜']);
const v = ref();
const mid = ref();
onMounted(() => {
  emmitter.on('movieEvent', e => {
    mid.value = e.mid;
  });
});
const star = () => {
  sForm.uid = JSON.parse(sessionStorage.getItem('uid'));
  sForm.mid = mid.value;
  sForm.star = v;

  axios.post('/api/rate/addRate', sForm).then(res => {
    if (res.data === '评分失败！已经评论过！') {
      alert('您已参与评分！感谢参与！');
      sForm.value = {
        uid: '',
        mid: '',
        star: '',
      };
      dialogVisible.value = false;
    } else if (res.data === '评分成功！') {
      ElMessage({
        showClose: true,
        message: '感谢评分！',
        type: 'success',
      });
      sForm.value = {
        uid: '',
        mid: '',
        star: '',
      };
      dialogVisible.value = false;
    } else {
      ElMessage({
        showClose: true,
        message: '评分失败！',
        type: 'error',
      });
    }
  });
};
const buy = () => {
  sessionStorage.setItem(
    'chooseMovie',
    JSON.stringify(JSON.parse(sessionStorage.getItem('movieInfo'))),
  );
  router.push('/Buy');
};
</script>
<style lang="scss" scoped>
.bnt {
  width: 130px;
  height: 50px;
  background-color: #409eff;
}
</style>
